// HMI启动屏幕组件 - 基于用户需求说明1.1

import React, { useState, useEffect } from 'react';
import { Car, Wifi, Shield, CheckCircle, AlertTriangle } from 'lucide-react';

interface StartupStep {
  id: string;
  name: string;
  description: string;
  icon: React.ReactNode;
  status: 'pending' | 'loading' | 'success' | 'error';
  duration: number;
}

const StartupScreen: React.FC<{ onComplete: () => void }> = ({ onComplete }) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [progress, setProgress] = useState(0);
  const [startupSteps, setStartupSteps] = useState<StartupStep[]>([
    {
      id: 'hardware',
      name: '硬件检测',
      description: '检查车辆硬件状态',
      icon: <Car size={24} />,
      status: 'pending',
      duration: 2000
    },
    {
      id: 'network',
      name: '网络连接',
      description: '建立与智驾域通信',
      icon: <Wifi size={24} />,
      status: 'pending',
      duration: 1500
    },
    {
      id: 'security',
      name: '安全系统',
      description: '初始化安全模块',
      icon: <Shield size={24} />,
      status: 'pending',
      duration: 1800
    },
    {
      id: 'data',
      name: '数据获取',
      description: '获取车辆状态数据',
      icon: <CheckCircle size={24} />,
      status: 'pending',
      duration: 1200
    }
  ]);

  useEffect(() => {
    const runStartupSequence = async () => {
      const steps = [
        {
          id: 'hardware',
          name: '硬件检测',
          description: '检查车辆硬件状态',
          icon: <Car size={24} />,
          status: 'pending' as const,
          duration: 500
        },
        {
          id: 'network',
          name: '网络连接',
          description: '建立与智驾域通信',
          icon: <Wifi size={24} />,
          status: 'pending' as const,
          duration: 400
        },
        {
          id: 'security',
          name: '安全系统',
          description: '初始化安全模块',
          icon: <Shield size={24} />,
          status: 'pending' as const,
          duration: 450
        },
        {
          id: 'data',
          name: '数据获取',
          description: '获取车辆状态数据',
          icon: <CheckCircle size={24} />,
          status: 'pending' as const,
          duration: 300
        }
      ];

      for (let i = 0; i < steps.length; i++) {
        // 设置当前步骤为加载中
        setStartupSteps(prev => prev.map((step, index) => 
          index === i ? { ...step, status: 'loading' } : step
        ));
        
        // 模拟加载过程
        const step = steps[i];
        const stepProgress = 100 / steps.length;
        const startProgress = i * stepProgress;
        
        // 逐步更新进度
        for (let p = 0; p <= 100; p += 2) {
          setProgress(startProgress + (p * stepProgress / 100));
          await new Promise(resolve => setTimeout(resolve, step.duration / 50));
        }
        
        // 设置步骤完成
        setStartupSteps(prev => prev.map((step, index) => 
          index === i ? { ...step, status: 'success' } : step
        ));
        
        setCurrentStep(i + 1);
      }
      
      // 启动完成，延迟500ms后调用完成回调
      setTimeout(() => {
        onComplete();
      }, 500);
    };

    runStartupSequence();
  }, [onComplete]);

  const getStepIcon = (step: StartupStep) => {
    switch (step.status) {
      case 'loading':
        return (
          <div className="w-8 h-8 border-2 border-primary-500 border-t-transparent rounded-full animate-spin" />
        );
      case 'success':
        return <CheckCircle size={24} className="text-success-500" />;
      case 'error':
        return <AlertTriangle size={24} className="text-danger-500" />;
      default:
        return <div className="w-8 h-8 border-2 border-gray-600 rounded-full" />;
    }
  };

  return (
    <div className="fixed inset-0 bg-gradient-to-br from-gray-900 via-blue-900 to-gray-900 flex items-center justify-center z-50">
      {/* 背景动画 */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-to-r from-primary-500/10 to-transparent rounded-full animate-pulse" />
        <div className="absolute -bottom-1/2 -right-1/2 w-full h-full bg-gradient-to-l from-blue-500/10 to-transparent rounded-full animate-pulse" />
      </div>

      <div className="relative z-10 text-center max-w-md mx-auto px-8">
        {/* 主标题 */}
        <div className="mb-12">
          <div className="flex items-center justify-center mb-6">
            <div className="w-16 h-16 bg-primary-600 rounded-xl flex items-center justify-center mb-4">
              <Car size={32} className="text-white" />
            </div>
          </div>
          <h1 className="text-3xl font-bold text-white mb-2">
            软通动力自动驾驶小巴
          </h1>
          <p className="text-xl text-gray-300">
            HMI 系统启动中
          </p>
        </div>

        {/* 启动步骤 */}
        <div className="space-y-4 mb-8">
          {startupSteps.map((step) => (
            <div
              key={step.id}
              className={`flex items-center gap-4 p-4 rounded-lg transition-all duration-300 ${
                step.status === 'loading' 
                  ? 'bg-primary-600/20 border border-primary-500/30' 
                  : step.status === 'success'
                  ? 'bg-success-600/20 border border-success-500/30'
                  : 'bg-gray-800/50 border border-gray-700/50'
              }`}
            >
              <div className="flex-shrink-0">
                {getStepIcon(step)}
              </div>
              <div className="flex-1 text-left">
                <h3 className={`font-medium ${
                  step.status === 'loading' ? 'text-primary-400' :
                  step.status === 'success' ? 'text-success-400' :
                  'text-gray-400'
                }`}>
                  {step.name}
                </h3>
                <p className="text-sm text-gray-500">
                  {step.description}
                </p>
              </div>
              {step.status === 'loading' && (
                <div className="flex-shrink-0">
                  <div className="w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin" />
                </div>
              )}
            </div>
          ))}
        </div>

        {/* 进度条 */}
        <div className="mb-6">
          <div className="flex justify-between text-sm text-gray-400 mb-2">
            <span>启动进度</span>
            <span>{Math.round(progress)}%</span>
          </div>
          <div className="w-full bg-gray-700 rounded-full h-2">
            <div
              className="bg-gradient-to-r from-primary-500 to-blue-500 h-2 rounded-full transition-all duration-300 ease-out"
              style={{ width: `${progress}%` }}
            />
          </div>
        </div>

        {/* 状态信息 */}
        <div className="text-sm text-gray-400">
          {currentStep < startupSteps.length ? (
            <p>正在{startupSteps[currentStep]?.name}...</p>
          ) : (
            <p className="text-success-400">系统启动完成</p>
          )}
        </div>
      </div>
    </div>
  );
};

export default StartupScreen;
